

<template>
<!-- v-if属性设置为false是直接跳过该属性的渲染 -->
<p v-if="true">你好</p>
<p v-if="false">你好</p>
  <!-- v-show属性设置为false是将该标签的display属性修改为none，通过css让元素消失，都要释放空间 -->
<p v-show="true">你好</p>
<p v-show="false">你好</p>

<p v-if="isShow">太阳</p>
<p v-else>月亮</p>
</template>
<script setup>
  import {ref} from "vue";

    const isShow = ref('');



</script>

<style scoped>

</style>